
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>孔颜乐处体质自测表</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        @font-face {
            font-family: 'Kaiti';
            src: url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap'); /* A stand-in; a real Kaiti font would be better */
        }

        body {
            font-family: 'Kaiti', 'STKaiti', 'KaiTi', sans-serif;
            background-color: #f4f1e9;
            color: #3a3a3a;
            margin: 0;
            padding: 0;
            background-image: url('https://www.toptal.com/designers/subtlepatterns/uploads/rice-paper.png'); /* Rice paper background */
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #8c8376;
            padding-bottom: 15px;
        }

        h1 {
            font-size: 2.5em;
            font-weight: normal;
            color: #5a0e0e; /* Dark red for titles */
            letter-spacing: 5px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .question-group {
            margin-bottom: 25px;
            background: rgba(255, 255, 255, 0.6);
            border: 1px solid #dcdacb;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .question {
            font-size: 1.2em;
            margin-bottom: 15px;
        }

        .options label {
            margin-right: 20px;
            font-size: 1.1em;
            cursor: pointer;
        }
        
        input[type="radio"] {
            margin-right: 5px;
        }

        #submitBtn {
            display: block;
            width: 100%;
            padding: 15px;
            font-size: 1.5em;
            font-family: 'Kaiti', 'STKaiti', 'KaiTi', sans-serif;
            background-color: #5a0e0e;
            color: #f4f1e9;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
            letter-spacing: 3px;
        }

        #submitBtn:hover {
            background-color: #7b2d2d;
        }

        #results {
            display: none;
            padding-top: 20px;
            text-align: center;
        }
        
        #results h2 {
            color: #5a0e0e;
            font-size: 2em;
        }
        
        #chart-container {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
        }

        .result-card {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid #dcdacb;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            text-align: left;
        }
        
        .result-card h3 {
            color: #5a0e0e;
            border-bottom: 1px solid #8c8376;
            padding-bottom: 10px;
            margin-top: 0;
        }
        
        .result-card p {
            line-height: 1.8;
        }
        
        strong {
           color: #5a0e0e;
        }

        #qrcode {
            margin-top: 40px;
            text-align: center;
        }

        #qrcode img {
            max-width: 200px;
            width: 100%;
        }

        #qrcode p {
            font-size: 1em;
            color: #5a0e0e;
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            h1 {
                font-size: 2em;
            }
            .question {
                font-size: 1.1em;
            }
        }

    </style>
</head>
<body>

    <div class="container">
        <header>
            <h1>孔颜乐处体质自测表</h1>
        </header>

        <form id="quizForm">
            <!-- Questions will be inserted here by JavaScript -->
        </form>
        
        <button id="submitBtn">查看结果</button>

        <div id="results">
            <h2>您的体质测评结果</h2>
            <div id="chart-container">
                <canvas id="radarChart"></canvas>
            </div>
            <div id="result-details"></div>
             <div id="qrcode">
                <img src="https://i.ibb.co/6P6g4vD/image.png" alt="QR Code">
                <p>扫一扫上面的二维码图案，加我为朋友。</p>
            </div>
        </div>
    </div>

    <script>
        const questions = [
            "您是否精力充沛，不易疲劳？",
            "您是否容易适应环境变化（如季节、温度）？",
            "您的面色是否红润有光泽？",
            "您是否经常感到疲乏无力？",
            "您是否容易气短（呼吸短促，上气不接下气）？",
            "您是否容易感冒，且病程较长？",
            "您是否比一般人怕冷，尤其是手脚冰凉？",
            "您是否经常感到胃部或小腹冷痛？",
            "您是否容易腹泻，尤其吃凉食后？",
            "您是否经常感到手脚心发热或心胸烦热？",
            "您是否经常口干舌燥，喜欢冷饮？",
            "您是否夜间容易出汗（盗汗）？",
            "您是否体型肥胖，尤其是腹部松软肥满？",
            "您是否经常感到喉咙有痰，或口中黏腻？",
            "您是否容易头晕、胸闷？",
            "您是否面部或鼻部容易出油、长痘？",
            "您是否经常口苦、口臭？",
            "您的大便是否黏滞不爽，或小便发黄？",
            "您的皮肤是否容易出现瘀斑或红血丝？",
            "您是否经常感到身体某处固定疼痛（如头痛、胸痛）？",
            "您的舌下静脉是否紫暗或增粗？",
            "您是否经常感到情绪低落或焦虑？",
            "您是否容易失眠、多梦？",
            "您是否经常叹气或感到胸闷胁痛？",
            "您是否容易过敏（如花粉、食物、药物）？",
            "您是否患有慢性过敏性鼻炎或荨麻疹？",
            "您的皮肤是否容易起风团或瘙痒？"
        ];

        const constitutionData = {
            '平和质': {
                score: 0,
                principle: "维持平衡，顺时养生。",
                tea: "<strong>五谷茶：</strong>粳米、小米、赤小豆、绿豆、黑豆各10g，炒香后煮水代茶。功效：健脾和胃，五行平衡。",
                food: "<strong>山家三脆羹：</strong>鲜笋、香菇、枸杞嫩叶各50g，切碎入鸡汤煮沸勾芡。功效：清补兼施，养胃生津。"
            },
            '气虚质': {
                score: 0,
                principle: "补中益气，健脾养胃。",
                tea: "<strong>参芪麦茶：</strong>党参6g、黄芪6g、炒麦芽10g，沸水焖泡代茶。功效：补气升阳，消食和中。",
                food: "<strong>茯苓山药粥：</strong>茯苓粉15g、鲜山药100g、粳米50g，慢火熬粥，加红枣3枚。功效：健脾渗湿，补气固表。"
            },
            '阳虚质': {
                score: 0,
                principle: "温补元阳，散寒通脉。",
                tea: "<strong>桂姜枣茶：</strong>肉桂粉1g、生姜3片、红枣（去核）5枚，煮15分钟代茶。功效：温肾暖脾，通阳化气。",
                food: "<strong>茴香羊肉羹：</strong>羊肉100g（焯去腥），小茴香5g、当归3g布包，同炖至烂熟，去药包加盐。功效：温中补虚，散寒止痛。"
            },
            '阴虚质': {
                score: 0,
                principle: "滋阴润燥，清热生津。",
                tea: "<strong>桑葚百合饮：</strong>桑葚干15g、百合10g、麦冬6g，煮水代茶。功效：滋肝肾，清心润肺。",
                food: "<strong>雪梨酿川贝：</strong>雪梨1只挖芯，填入川贝粉3g、冰糖5g，蒸30分钟食梨饮汁。功效：润燥止咳，降火生津。"
            },
            '痰湿质': {
                score: 0,
                principle: "健脾化痰，利湿泄浊。",
                tea: "<strong>橘皮薏仁茶：</strong>陈皮5g、炒薏米15g、荷叶3g，煮水代茶。功效：理气化湿，升清降浊。",
                food: "<strong>冬瓜赤豆汤：</strong>冬瓜连皮200g、赤小豆30g、生姜3片，煮汤去浮油。功效：利水渗湿，化痰减肥。"
            },
            '湿热质': {
                score: 0,
                principle: "清热利湿，疏泄三焦。",
                tea: "<strong>三花清暑饮：</strong>金银花5g、野菊花3g、木棉花10g，沸水冲泡代茶。功效：清热解毒，凉血利湿。",
                food: "<strong>绿豆马齿苋粥：</strong>绿豆30g、粳米50g煮粥，加鲜马齿苋50g（后下）稍煮。功效：解暑毒，化肠湿。"
            },
            '血瘀质': {
                score: 0,
                principle: "活血化瘀，通络散结。",
                tea: "<strong>山楂玫瑰茶：</strong>山楂干10g、玫瑰花5朵、红糖少许，焖泡代茶。功效：行气活血，散郁止痛。",
                food: "<strong>黑醋浸木耳：</strong>黑木耳15g泡发焯熟，加黑醋20ml、姜汁5ml拌匀。功效：化瘀通脉，软化血管。"
            },
            '气郁质': {
                score: 0,
                principle: "疏肝解郁，调达气机。",
                tea: "<strong>佛手香橼茶：</strong>佛手片5g、香橼片3g、薄荷叶2g，沸水冲泡。功效：疏肝理气，解郁和中。",
                food: "<strong>金针菜炖鸭：</strong>鸭肉200g、金针菜（黄花菜）20g、合欢花5g布包，同炖至烂。功效：开郁安神，滋阴行气。"
            },
            '特禀质': {
                score: 0,
                principle: "固表御邪，调和营卫。",
                tea: "<strong>防风乌梅饮：</strong>防风6g、乌梅10g、甘草3g，煮水代茶。功效：抗敏脱敏，敛肺固表。",
                food: "<strong>固表小米羹：</strong>小米50g、山药30g、黄芪10g（布包），熬粥后去黄芪，加百合20g。功效：健脾益气，增强卫气。"
            }
        };

        const constitutionMapping = [
            '平和质', '平和质', '平和质',
            '气虚质', '气虚质', '气虚质',
            '阳虚质', '阳虚质', '阳虚质',
            '阴虚质', '阴虚质', '阴虚质',
            '痰湿质', '痰湿质', '痰湿质',
            '湿热质', '湿热质', '湿热质',
            '血瘀质', '血瘀质', '血瘀质',
            '气郁质', '气郁质', '气郁质',
            '特禀质', '特禀质', '特禀质'
        ];

        // Populate questions
        const quizForm = document.getElementById('quizForm');
        questions.forEach((q, i) => {
            const group = document.createElement('div');
            group.className = 'question-group';
            group.innerHTML = `
                <p class="question">${i + 1}. ${q}</p>
                <div class="options">
                    <label><input type="radio" name="q${i}" value="1" required> 是</label>
                    <label><input type="radio" name="q${i}" value="0"> 否</label>
                </div>
            `;
            quizForm.appendChild(group);
        });

        // Handle submission
        document.getElementById('submitBtn').addEventListener('click', function(event) {
            event.preventDefault();
            
            const form = document.getElementById('quizForm');
            if (!form.checkValidity()) {
                alert('请回答所有问题。');
                return;
            }

            // Reset scores
            for (const key in constitutionData) {
                constitutionData[key].score = 0;
            }

            // Calculate scores
            for (let i = 0; i < questions.length; i++) {
                const val = document.querySelector(`input[name="q${i}"]:checked`).value;
                if (val === '1') {
                    const constitution = constitutionMapping[i];
                    constitutionData[constitution].score++;
                }
            }

            // Hide form and show results
            form.style.display = 'none';
            document.getElementById('submitBtn').style.display = 'none';
            document.getElementById('results').style.display = 'block';

            // Find max score
            let maxScore = 0;
            const labels = Object.keys(constitutionData);
            const scores = labels.map(label => {
                const score = constitutionData[label].score;
                if (score > maxScore) {
                    maxScore = score;
                }
                return score;
            });
            
            //平和质分数换算
            const peacefulScore = 3 - (constitutionData['平和质'].score);
            scores[0] = peacefulScore;
            constitutionData['平和质'].score = peacefulScore;
            if(peacefulScore > maxScore){
                maxScore = peacefulScore;
            }

            // Display result details
            const resultDetails = document.getElementById('result-details');
            resultDetails.innerHTML = '';
            
            if (maxScore === 0) {
                 // Special case if all answers are "no", leading to 0 scores except for peaceful
                 const data = constitutionData['平和质'];
                 const card = document.createElement('div');
                 card.className = 'result-card';
                 card.innerHTML = `
                     <h3>平和质 (得分: ${data.score})</h3>
                     <p><strong>调养原则：</strong>${data.principle}</p>
                     <p><strong>茶饮方：</strong>${data.tea}</p>
                     <p><strong>食疗方：</strong>${data.food}</p>
                 `;
                 resultDetails.appendChild(card);
            } else {
                 labels.forEach(label => {
                    const data = constitutionData[label];
                    if (data.score === maxScore) {
                        const card = document.createElement('div');
                        card.className = 'result-card';
                        card.innerHTML = `
                            <h3>${label} (得分: ${data.score})</h3>
                            <p><strong>调养原则：</strong>${data.principle}</p>
                            <p><strong>茶饮方：</strong>${data.tea}</p>
                            <p><strong>食疗方：</strong>${data.food}</p>
                        `;
                        resultDetails.appendChild(card);
                    }
                });
            }

            // Create radar chart
            const ctx = document.getElementById('radarChart').getContext('2d');
            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '体质得分',
                        data: scores,
                        backgroundColor: 'rgba(90, 14, 14, 0.2)',
                        borderColor: 'rgba(90, 14, 14, 1)',
                        borderWidth: 2,
                        pointBackgroundColor: 'rgba(90, 14, 14, 1)'
                    }]
                },
                options: {
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 3,
                            ticks: {
                                stepSize: 1
                            },
                             pointLabels: {
                                font: {
                                    size: 14,
                                    family: 'Kaiti',
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                           display: false
                        }
                    }
                }
            });
             // Scroll to results
            document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
        });

    </script>
</body>
</html>
